<template>
  <div :ref="refsName"></div>
</template>

<script type="text/ecmascript-6">
const echarts = require('echarts');

export default {
  name: 'dx-e-chart',
  props: {
    backgroundColor: {
      type: String,
      default() {
        return '#fff';
      }
    },
    refsName: {
      type: String,
      default() {
        return 'chartBox';
      }
    },
    color: {
      type: Array,
      default() {
        return ['#90C320'];
      }
    },
    title: {
      type: Object,
      default() {
        return {};
      }
    },
    showLegend: {
      type: Boolean,
      default() {
        return false;
      }
    },
    xAxisData: {
      type: Array,
      default() {
        return [];
      }
    },
    yAxis: {
      type: Array,
      default() {
        return [{
          type: 'value',
          splitLine: { show: false }
        }];
      }
    },
    // xAxisOrient: {
    xAxisVertical: {
      type: Boolean,
      default() {
        return false;
      }
    },
    series: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      chart: null,
      option: null
    };
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs[this.refsName]);
    },
    initOption() {
      const option = {
        backgroundColor: this.backgroundColor,
        color: this.color
      };
      option.title = this.setTitle(this.title);
      option.grid = this.setGrid(this.title);
      option.tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      };
      option.legend = this.showLegend ? this.setLegend(this.series) : null;
      option.xAxis = this.setXAxis(this.xAxisData);
      option.yAxis = this.setYAxis();
      option.series = this.setSeries(this.series);
      this.option = option;
    },
    setTitle(title) {
      if (Object.prototype.hasOwnProperty.call(this.title, 'text')) {
        return title;
      }
      return null;
    },
    setGrid(title) {
      let top = '10';
      let bottom = '10';
      if (title) top = title.textStyle ? title.textStyle.fontSize : '18';
      if (this.showLegend) bottom = '30';
      return {
        top,
        left: '5',
        right: '10',
        bottom,
        containLabel: true
      };
    },
    setLegend(series) {
      return { data: series.map(item => item.name), bottom: 0 };
    },
    setXAxis(xAxisData) {
      return xAxisData.map(data => ({
        data,
        axisLabel: {
          interval: 0,
          formatter: val => {
            if (!this.xAxisVertical) return val;
            return val.split('').join('\n');
          }
        }
      }));
    },
    setYAxis() {
      return this.yAxis;
      // [{
      //   type: 'value',
      //   splitLine: { show: false }
      // }];
    },
    setSeries(series) {
      if (series.length) {
        return series.map(item => Object.assign(item, { barWidth: series.length > 1 ? '30%' : '40%' }));
      }
      return [{ type: 'bar', data: [] }];
    },
    showLoading() {
      if (!this.chart) {
        this.initChart();
      }
      this.chart.showLoading({
        text: '数据正在加载...',
        color: '#2f86f6',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)'
      });
    },
    hideLoading() {
      this.chart.hideLoading();
    },
    updateChart() {
      if (!this.chart) {
        this.initChart();
      }
      if (!this.option) {
        this.initOption();
      }
      this.hideLoading();
      this.option.xAxis = this.setXAxis(this.xAxisData);
      this.option.series = this.setSeries(this.series);
      this.chart.setOption(this.option);
    }
  }
};
</script>
